<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/pageHead.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet"/>
</head>
<body>
<form class="layui-form layui-form-pane" id="_form">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">人事信息</li>
            <li>合同信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <%--基本信息--%>
                <fieldset class="layui-elem-field">
                    <legend>基本信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input readonly-tag"
                                           value="${personalRecords.realname}"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">工号</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                           value="${personalRecords.jobNumber}">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">身份证号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="idcard" autocomplete="off" class="layui-input readonly-tag"
                                           value="${personalRecords.idcard}" readonly="readonly">
                                </div>
                            </div>
                            <div class=" layui-inline">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                    <c:forEach items="${fns:getDictList('gender')}" var="gender">
                                    <c:if test="${gender.value == personalRecords.gender}">
                                           value="${gender.value}"
                                    </c:if>
                                    </c:forEach>>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">出生日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="birthday" autocomplete="off"
                                           value="<fmt:formatDate value='${personalRecords.birthday}' pattern='yyyy-MM-dd'/>"
                                           class="layui-input readonly-tag" readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="phone" autocomplete="off" class="layui-input readonly-tag"
                                           value="${personalRecords.phone}" readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">政治面貌</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                    <c:forEach items="${fns:getDictList('political')}" var="political">
                                    <c:if test="${political.value == personalRecords.political}">
                                           value="${political.value}"
                                    </c:if>
                                    </c:forEach>>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">档案编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="archiveNo" autocomplete="off"
                                           class="layui-input readonly-tag" value="${personalRecords.archiveNo}"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">入职时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="joinedTime" autocomplete="off"
                                           class="layui-input readonly-tag"
                                           readonly="readonly"
                                           value="<fmt:formatDate value='${personalRecords.joinedTime}' pattern='yyyy-MM-dd'/>">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">转正日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="positiveTime" autocomplete="off"
                                           class="layui-input readonly-tag"
                                           readonly="readonly"
                                           value="<fmt:formatDate value='${personalRecords.positiveTime}' pattern='yyyy-MM-dd'/>">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <%--工作信息--%>
                <fieldset class="layui-elem-field">
                    <legend>工作信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">工作部门</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                           value="${organization.name}">
                                </div>
                            </div>
                            <div class="layui-block">
                                <label class="layui-form-label">工作岗位</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                           value="${position.name}">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <%--合同信息--%>
                <fieldset class="layui-elem-field">
                    <legend>合同信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">是否见习</label>
                                <div class="layui-input-inline">
                                    <c:if test="${personalRecords.probation}">
                                        <input type="radio" title="是" checked>
                                        <input type="radio" title="否" disabled>
                                    </c:if>
                                    <c:if test="${!personalRecords.probation}">
                                        <input type="radio" title="是" disabled>
                                        <input type="radio" title="否" checked>
                                    </c:if>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">见习开始时间</label>
                                <div class="layui-input-inline">
                                    <input type="text"
                                           value="<fmt:formatDate value='${personalRecords.startProbationTime}' pattern='yyyy-MM-dd'/>"
                                           class="layui-input readonly-tag" readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">见习结束时间</label>
                                <div class="layui-input-inline">
                                    <input type="text"
                                           value="<fmt:formatDate value='${personalRecords.endProbationTime}' pattern='yyyy-MM-dd'/>"
                                           class="layui-input readonly-tag" readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">是否签订合同</label>
                                <div class="layui-input-inline">
                                    <c:if test="${personalRecords.signed}">
                                        <input type="radio" title="是" checked>
                                        <input type="radio" title="否" disabled>
                                    </c:if>
                                    <c:if test="${!personalRecords.signed}">
                                        <input type="radio" title="是" disabled>
                                        <input type="radio" title="否" checked>
                                    </c:if>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">签订合同日期</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input readonly-tag" readonly="readonly"
                                           value="<fmt:formatDate value='${personalRecords.signedTime}' pattern='yyyy-MM-dd'/>">
                                </div>
                            </div>

                            <div class="layui-block">
                                <label class="layui-form-label">是否兼职</label>
                                <div class="layui-input-inline">
                                    <c:if test="${personalRecords.parttime}">
                                        <input type="radio" title="否" disabled>
                                        <input type="radio" title="是" checked>
                                    </c:if>
                                    <c:if test="${!personalRecords.parttime}">
                                        <input type="radio" title="否" checked>
                                        <input type="radio" title="是" disabled>
                                    </c:if>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">兼职类型</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input readonly-tag" readonly="readonly"
                                    <c:forEach items="${fns:getDictList('parttime_type')}" var="type">
                                    <c:if test="${type.value == personalRecords.parttimeType}">
                                           value="${type.name}"
                                    </c:if>
                                    </c:forEach>
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <%--学历信息--%>
                <fieldset class="layui-elem-field">
                    <legend>学历信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">最高学历</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                    <c:forEach items="${fns:getDictList('education')}" var="education">
                                    <c:if test="${education.value == personalRecords.education}">
                                           value="${education.name}"
                                    </c:if>
                                    </c:forEach>>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">学历类型</label>
                                <div class="layui-input-inline">
                                    <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                    <c:forEach items="${fns:getDictList('education_type')}" var="type">
                                    <c:if test="${type.value == personalRecords.educationType}">
                                           value="${type.name}"
                                    </c:if>
                                    </c:forEach>>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">毕业院校</label>
                                <div class="layui-input-inline">
                                    <input type="text" value="${personalRecords.university}"
                                           class="layui-input readonly-tag" readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">毕业时间</label>
                                <div class="layui-input-inline">
                                    <input type="text"
                                           value="<fmt:formatDate value='${personalRecords.graduationTime}' pattern='yyyy-MM-dd'/>"
                                           class="layui-input readonly-tag" readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">所学专业</label>
                                <div class="layui-input-inline">
                                    <input type="text" value="${personalRecords.professional}"
                                           class="layui-input readonly-tag" readonly="readonly">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <%--其他信息--%>
                <fieldset class="layui-elem-field">
                    <legend>其他信息</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">工龄</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input readonly-tag"
                                           value="${personalRecords.workage}"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">招聘渠道</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input readonly-tag"
                                           value="${personalRecords.channel}"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea readonly-tag"
                                              readonly="readonly">${personalRecords.remarks}</textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                </fieldset>
                <%--工作经历--%>
                <c:if test="${experiences.size() > 0}">
                    <fieldset class="layui-elem-field">
                        <legend>工作经历</legend>
                        <div class="layui-field-box" id="experience">
                            <c:forEach items="${experiences}" var="experience">
                                <div class="layui-form-item" experienceDiv="true">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">公司名</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="${experience.company}"
                                                   class="layui-input readonly-tag"
                                                   readonly="readonly">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">岗位</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="${experience.position}"
                                                   class="layui-input readonly-tag"
                                                   readonly="readonly">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">公司地点</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="${experience.location}"
                                                   class="layui-input readonly-tag"
                                                   readonly="readonly">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">工作年限</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="${experience.year}"
                                                   class="layui-input readonly-tag"
                                                   readonly="readonly">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">入职日期</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input readonly-tag" readonly="readonly"
                                                   value="<fmt:formatDate value='${experience.startTime}' pattern='yyyy-MM-dd'/>">

                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">离职日期</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input readonly-tag" readonly="readonly"
                                                   value="<fmt:formatDate value='${experience.endTime}' pattern='yyyy-MM-dd'/>">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">备注</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input readonly-tag"
                                                   value="${experience.remarks}"
                                                   readonly="readonly">
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </fieldset>
                </c:if></div>
            <div class="layui-tab-item">
                <c:if test="${not empty contract}">
                    <fieldset class="layui-elem-field">
                        <legend>当前合同</legend>
                        <div class="layui-field-box">
                            <input name="id" value="${contract.id}" type="hidden">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同编号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input readonly-tag"
                                               value="${contract.contractNumber}" name="contractNumber"
                                               readonly="readonly">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同期限(年)</label>
                                    <div class="layui-input-inline">
                                        <input type="text" readonly="readonly" class="layui-input readonly-tag"
                                               value="${contract.period}" name="period" id="period" oninput="changeDate()">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">合同类型</label>
                                    <div class="layui-input-inline">
                                        <select name="contractType" class="layui-input">
                                            <c:forEach items="${fns:getDictList('contract_type')}" var="type">
                                                <option value="${type.value}" disabled
                                                        <c:if test="${type.value == contract.contractType}">
                                                            selected
                                                        </c:if>
                                                >${type.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">生效日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="effectiveTime" autocomplete="off" id="effectiveTime"
                                               value="<fmt:formatDate value='${contract.effectiveTime}' pattern='yyyy-MM-dd'/>"
                                               class="layui-input readonly-tag" readonly="readonly">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">失效日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" name="uneffectiveTime" id="uneffectiveTime"
                                               class="layui-input readonly-tag" readonly="readonly"
                                               value="<fmt:formatDate value='${contract.uneffectiveTime}' pattern='yyyy-MM-dd'/>">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-block">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea type="text" readonly="readonly" style="width: 88%;" name="remarks"
                                              class="layui-textarea readonly-tag">${contract.remarks}</textarea>
                                </div>
                            </div>
                            <div class="layui-block">
                                <button onclick="updateContractRecords(${contract.id},false,this)" class="layui-btn"
                                        type="button">编辑
                                </button>
                                <button onclick="doUpdate(${contract.id},this)" class="layui-btn" type="button"
                                        style="display: none">保存
                                </button>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field">
                        <legend>以往合同</legend>
                        <c:forEach items="${contractRecordses}" var="contractRecords">
                            <table class="layui-table" style="max-width: 1000px;margin: 20px auto;">

                                <thead>
                                <tr>
                                    <th>创建日期</th>
                                    <th><fmt:formatDate value='${contractRecords.ctime}' pattern='yyyy-MM-dd HH:mm:ss'/></th>
                                    <th>合同编号</th>
                                    <th>${contractRecords.contractNumber}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>合同期限(年)</td>
                                    <td>${contractRecords.period}年</td>
                                    <td>合同类型</td>
                                    <td>
                                        <c:forEach items="${fns:getDictList('contract_type')}" var="type">
                                            <c:if test="${type.value == contractRecords.contractType}">
                                                ${type.name}
                                            </c:if>
                                        </c:forEach>
                                    </td>
                                </tr>
                                <tr>
                                    <td>生效日期</td>
                                    <td><fmt:formatDate value='${contractRecords.effectiveTime}' pattern='yyyy-MM-dd'/></td>
                                    <td>失效日期</td>
                                    <td><fmt:formatDate value='${contractRecords.uneffectiveTime}'
                                                        pattern='yyyy-MM-dd'/></td>
                                </tr>
                                <tr>
                                    <td colspan="1">备注</td>
                                    <td colspan="3">${contractRecords.remarks}</td>
                                </tr>
                                </tbody>
                            </table>
                        </c:forEach>
                    </fieldset>
                </c:if>
                <c:if test="${empty contract}">
                    未签订合同
                </c:if>

            </div>
        </div>
    </div>

</form>

<jsp:include page="/resources/inc/pageFooter.jsp" />
<script>
    layui.use('element', function () {
        var element = layui.element;

    });
    function updateContractRecords(id, isContractRecords, button) {
        var box = $(button).parents(".layui-field-box");
        var inputs = box.find("input");
        inputs.removeAttr("readonly");
        inputs.removeClass("readonly-tag");

        var textareas = box.find("textarea");
        textareas.removeAttr("readonly");
        textareas.removeClass("readonly-tag");

        var options = box.find("dd");
        options.removeClass("layui-disabled");
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#effectiveTime' //指定元素
                , theme: '#393D49'
                , done: function (value, date, endDate) {
                    changeDate();
                }
            });
        });
        $(button).next().show();
    }

    function doUpdate(id, button) {
        var idInput = $("input[name='id'][value='" + id + "']");
        var box = $(idInput).parents(".layui-field-box");
        var inputs = box.find("input");

        var id = box.find("input[name='id']").val();
        var contractNumber = box.find("input[name='contractNumber']").val();
        var period = box.find("input[name='period']").val();
        var contractType = box.find(".layui-this").attr("lay-value");
        var effectiveTime = box.find("input[name='effectiveTime']").val();
        effectiveTime = new Date(effectiveTime).getTime();
        var uneffectiveTime = box.find("input[name='uneffectiveTime']").val();
        uneffectiveTime = new Date(uneffectiveTime).getTime();
        var remarks = box.find("textarea[name='remarks']").html();
        var contract = {
            id: id,
            contractNumber: contractNumber,
            period: period,
            contractType: contractType,
            effectiveTime: effectiveTime,
            uneffectiveTime: uneffectiveTime,
            remarks: remarks
        };
        var url = "${basePath}/oa/hr/personalContract/update";
        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify(contract),
            contentType: "application/json;charset=utf-8",
            success: function (res) {
                box.find(".date-select").each(function (index, input) {
                    $(input).after($(input).clone());
                    $(input).remove();
                });
                if (res.code != 1) {
                    subFlag = false;
                    if (typeof(res.data) != "undefined" && res.data.length > 0) {
                        layer.msg(res.data, {icon: 5});
                    } else {
                        layer.msg(res.message, {icon: 5});
                    }
                } else {
                    $(button).hide();
                    inputs.attr("readonly", "readonly");
                    inputs.addClass("readonly-tag");
                    var textareas = box.find("textarea");
                    textareas.attr("readonly", "readonly");
                    textareas.addClass("readonly-tag");
                    var options = box.find("dd");
                    options.addClass("layui-disabled");
                    layer.msg('操作成功！', {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {

                    });
                }
            },
            error: function (res) {
                layer.msg("操作异常", {icon: 5});
            }
        });
    }
    function changeDate() {
        var effectiveTimeVal = $("#effectiveTime").val();
        var periodVal = $("#period").val();
        var period = Number($("#period").val());
        var flag = false;
        if (period.toString().length > 2) {
            flag = true;
        }
        if (!Number.isInteger(period)) {
            flag = true;
        }
        if (period < 1 && periodVal.length != 0) {
            flag = true;
        }
        if (flag) {
            layer.msg("请输入正确的合同期限(两位以内的正整数)", {icon: 5});
                $("#uneffectiveTime").val("");
            return;
        }
        if (effectiveTimeVal.length < 1 || periodVal.length < 1) {
            $("#uneffectiveTime").val("");
            return;
        }
        var effectiveTime = new Date(effectiveTimeVal);
        var uneffectiveTime = effectiveTime;
        uneffectiveTime.setYear(uneffectiveTime.getFullYear() + period);
        var fullYear = uneffectiveTime.getFullYear();
        var month = uneffectiveTime.getMonth() + 1;
        var day = uneffectiveTime.getDate();
        if (month.toString().length < 2) {
            month = 0 + month.toString();
        }
        if (day.toString().length < 2) {
            day = 0 + day.toString();
        }
        var date = fullYear + "-" + month + "-" + day;
        $("#uneffectiveTime").val(date);
    }
</script>
</body>
</html>
